<template>
	<view class="w100p common_wrap">
		<CommonHeader :title="lang !== 'ru' ? '搜索' : 'Поиск'" color="#262728" @goback="goback" :is-right="false">
		</CommonHeader>

		<!-- 切换tab -->
		<view class="tab-wrapper">
			<view :class="['tab', index == currentTapIndex && 'active']" v-for="(item, index) in tabList" :key="index"
				@click="onTab(index)">
				<text>{{ item.title }}</text>
				<uni-badge :customStyle="{ background: '#f00' }" text="1" absolute="rightTop" :offset="[-3, -6]" />
			</view>
		</view>

		<view class="w100p common_search">
			<view class="flex-box w100p search_wrap">
				<uni-icons type="search" size="36rpx" color="#262728"></uni-icons>
				<u-input class="flex-item text" v-model="keyword" type="text" :border="false" :placeholder="$t('搜索')" height="auto" confirm-type="search" @confirm="search" />
			</view>
		</view>
		<view class="w100p history_wrap" v-if="!!historyData && !!historyData.length">
			<scroll-view :scroll-top="scrollTopH" scroll-y="true" class="w100p scroll-Y" @touchmove.stop>
				<view class="w100p flex-box history_list">
					<view class="ellipsis list_item" v-for="(item, index) in historyData" :key="index" @click="search(item)">{{ item }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="w100p tc history_btn">
			<text class="btn" @click="clearHistory" v-if="!!historyData && !!historyData.length">{{ $t("清除历史记录") }}</text>
		</view>
		<view class="w100p pr list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="w100p scroll-Y" refresher-enabled="true" @scrolltolower="lower" @refresherrefresh="fresh"
				refresher-background="transparent" :refresher-triggered="isRefresher" @refresherrestore="store" @touchmove.stop>
        	<!-- 列表 -->
				<view class="list-wrapper ">
					<view class="list" v-for="(item, index) in 10" :key="index" @click="onGoDetail">
						<view class="img">
							<image class="pic" src="/static/caigou/pic.png" mode="aspectFill" />
							<view class="right-person">
								<view class="avatar" :style="{width: getWidth()}">
									<view class="bor">
										<image src="/static/caigou/pic.png" mode="aspectFill"></image>
									</view>
									<view class="bor">
										<image src="/static/caigou/pic.png" mode="aspectFill"></image>
									</view>
									<view class="bor">
										<image src="/static/caigou/pic.png" mode="aspectFill"></image>
									</view>
								</view>
								<text>100+</text>
							</view>
						</view>
						<view class="bottom-desc">
							<view class="desc-w">
								<view class="name ellipsis_two">
									通用汽车坐垫四季通用冰凌透气全车型四季通用冰凌透气全车型
									通用汽车坐垫四季通用冰凌透气全车型四季通用冰凌透气全车型
								</view>
								<view class="rg-circle">
									<image src="/static/caigou/buyx.png" />
									<text>2</text>
								</view>
							</view>
							<!-- 参与报价 -->
							<view class="btn">已有99人感兴趣并参与报价</view>
							<!-- 基础信息 -->
							<view class="base-info">
								<view class="left-avatar">
									<view class="avatar-w">
										<view class="avatar">
											<image src="/static/caigou/pic.png" mode="aspectFill"></image>
										</view>
										<view class="country">
											<image src="/static/caigou/china.png"></image>
										</view>
									</view>
									<view class="desc-avatar">
										<view class="name ellipsis_one">于良一人于良一人</view>
										<view class="vip-leval">
											<view class="circle">
												<image src="/static/detail/vip_1.png" mode="scaleToFill" />
											</view>
											<text>VIP</text>
										</view>
									</view>
								</view>

								<!-- 单数 -->
								<view class="right-numwrap">
									<view class="li">
										<view class="txt">{{$t('发布')}}采购</view>
										<view class="num">8</view>
									</view>
									<view class="li">
										<view class="txt">成交单数</view>
										<view class="num">8</view>
									</view>
									<view class="li">
										<view class="txt">成交率</view>
										<view class="num">99%</view>
									</view>
								</view>


							</view>
						</view>

					</view>
				</view>
				<view class="w100p pr empty_wrap">
					<view class="empty">
						<image class="empty_img" src="@/static/search.png" mode="widthFix"></image>
						<text class="empty_text">{{ lang !== 'ru' ? "暂无搜索信息" : "Пока нет информации о поиске" }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import CommonHeader from "@/pages/components/common-header.vue";
	import img from '@/static/mt-li/pic.png';

	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			CommonHeader
		},
		data() {
			return {
				dataList: [],
				current: 0,
				isLoading: false,
				scrollTop: 0,
				scrollTopH: 0,
				page: 1,
				limit: 12,
				isData: false,
				shopId: "",
				isRefresher: false,
				keyword: "",
				isMerchant: false,
				isChange: false,
				historyData: [],
				commonImg: img,
				view: 1,

        currentTapIndex: 0,
        tabList: [{
          title: this.$t('采购寻单'),
          count: 0,
        }, {
          title: this.$t('我发布的'),
          count: 2,
        }, {
          title: this.$t('我参与的'),
          count: 1,
        }],
			}
		},
		computed: {
			// 使用mapState生成计算属性
			...mapState({
				lang: state => state.commonData.lang,
			})
		},
		watch: {
			lang(newValue, oldValue) {
				console.log('lang changed:', newValue);
			},
		},
	
		created() {
			let res = uni.getStorageSync('historyRecord') || [];
			this.historyData = [...res];
		},
		onShow() {
		},
		methods: {
      onGoDetail() {
        uni.navigateTo({
          url:'/pages/caigou/xundanDetail/index',
        })
      },
      onTab(index) {
        this.currentTapIndex = index;
      },
      getWidth() {
        let arr = ['40rpx', '56rpx', 'auto']
        return arr[2];
      },
      // 跳转搜索页
      goSearch() {
        uni.navigateTo({
          url: '/pages/caigou/search/index'
        })
      },

			// 搜索
			search(val) {
				if (!val) return;
				this.keyword = val;
				this.dataList = [];
				let add = this.historyData.some((item, index) => {
					if (item === val) {
						this.historyData.splice(index, 1);
						return true;
					}
					return false;
				})
				this.historyData.unshift(val);
				if (!add) {
					if (this.historyData.length < 10) {
						uni.setStorageSync('historyRecord', this.historyData);
					} else {
						let arr = [];
						this.historyData.map((item, index) => {
							if (index < 10) {
								arr.push(item);
							}
						})
						uni.setStorageSync('historyRecord', arr);
					}
				}

				this.isChange = this.isMerchant;
				this.getData();
			},
	
			// 清除历史记录
			clearHistory() {
				this.historyData = [];
				uni.removeStorageSync('historyRecord');
			},
			// 触底加载
			lower() {
				if (this.isData) return;
				this.page++;
				this.getData();
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1;
				this.isRefresher = true;
				this.isData = false;
				this.getData();
			},
			// 下拉刷新复位
			store() {
				this.isRefresher = false;
			},
			// getprolist 获取列表
			async getData() {
				if (this.isLoading) return;
				this.isLoading = true;
				try {
					let api = "getblist";
					if (!this.isMerchant) {
						api = "getprolist";
					}
					const {
						data
					} = await this.$u.api.shopping[api]({
						cid: "",
						pagenum: this.page,
						keyword: this.keyword,
						field: "",
						order: "",
						lang: this.lang,
						isZero: 2,
					});
					// 首页置空数据
					if (this.page === 1) {
						this.dataList = [];
					}
					// 每页最多12条数据，分两组
					if (!!data?.length) {
						// 每6条数据加一组广告
						let arr = [];
						data.map(item => {
							arr.push(item);
						})

						this.dataList.push(...arr);

						// 数据不足12条，禁止上拉加载
						if (this.lang == 'zh') {
							if (data.length < 12) {
								this.isData = true;
							}
						} else {
							if (data.length < 6) {
								this.isData = true;
							}
						}
						
					} else {
						this.isData = true;
					}
					this.isLoading = false;
					this.isRefresher = false;
				} catch (e) {
					this.isLoading = false;
					this.isRefresher = false;
				}
			},
	
		}
	}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>